<div class="w-full shadow-lg rounded overflow-hidden"
  data-controller="key-value"
  data-key-value-target="controller"
  data-options="<%= @field.options.to_json %>"
  data-input-classes="<%= input_classes %>"
  data-editable="<%= @view.form? %>"
>
  <div class="w-full flex flex-col">
    <div class="flex w-full">
      <div class="flex w-full bg-gray-700 shadow overflow-hidden">
        <div class="w-1/2 py-3 px-3 uppercase font-semibold text-xs text-white border-gray-600 border-r">
          <%= @field.key_label %>
        </div>
        <div class="w-1/2 py-3 px-3 uppercase font-semibold text-xs text-white">
          <%= @field.value_label %>
        </div>
        <% if @view.form? %>
          <div class="flex items-center justify-center p-2 px-[48px] border-l border-gray-600">
            <a href="javascript:void(0);"
              title="<%= @field.action_text %>"
              data-tippy="tooltip"
              data-button="add-row"
              data-action="click->key-value#addRow"
              <% if @field.disable_adding_rows %>
                class="cursor-not-allowed"
              <% end %>
            >
              <%= helpers.svg "heroicons/outline/plus-circle", class: 'text-gray-400 h-5 hover:text-gray-500' %>
            </a>
          </div>
        <% end %>
      </div>
    </div>
    <div data-key-value-target="rows"></div>
  </div>
  <% if @form.present? %>
    <%= @form.text_area @field.id,
      value: @field.parsed_value,
      class: 'hidden',
      placeholder: @field.placeholder,
      data: {
        "key-value-target": 'input',
        view: @view,
        **@field.get_html(:data, view: @view, element: :input)
      }
    %>
  <% else %>
    <%= text_area_tag @field.id,
      @field.parsed_value,
      class: 'hidden',
      placeholder: @field.placeholder,
      data: {
        "key-value-target": 'input',
        view: @view,
        **@field.get_html(:data, view: @view, element: :input)
      }
    %>
  <% end %>
</div>
